import React from 'react';
import { Tooltip } from 'antd';
import classnames from 'classnames';
import styles from './style.less';

const Bar = ({ colors, data = [], activeId, onSelect }) => {
    const sum = data.reduce((prev, { value = 0 }) => prev + value, 0);
    const handleSelect = id => () => {
        onSelect(id);
    };

    return (
        <div className={styles.wrap}>
            {data.map(({ name = '', value = 0, id }, index) => (
                <Tooltip key={name} title={`${name}：${value}`}>
                    <div
                        className={classnames(styles.barItem, { [styles.active]: activeId === id })}
                        style={{ width: `${(value / sum) * 100}%`, background: colors[index] }}
                        onClick={handleSelect(id)}
                    />
                </Tooltip>
            ))}
        </div>
    );
};

export default Bar;
